<template>
  <div class="viewdiscovery">
    <div class="Inputbox">
      <i class="iconfont icon-sousuo"></i>
      <input
        @blur="blur"
        v-model="SearchValue"
        ref="input"
        type="text"
        placeholder="请输入作品名、创作人"
        @focus="searchswitch = 1"
        @keyup.enter="searchswitch = 2"
      />
      <span @click="$router.back()">取消</span>
    </div>

    <div class="historicalsearch" v-if="searchswitch == 1">
      <div class="top">
        <h1>历史搜索</h1>
        <i class="iconfont icon-shanchu" @click="empty"></i>
      </div>
      <div class="main">
        <div
          class="card"
          v-for="(item, index) in search"
          :key="index"
          @click="
            SearchValue = item;
            searchswitch = 2;
            active='works'
          "
        >
          <span>{{ item }}</span>
        </div>
      </div>
    </div>

    <div class="historicalsearch" v-if="searchswitch == 1">
      <div class="bottom">
        <h1>热门搜索</h1>
        <div class="main">
          <div
            class="card"
            v-for="item in hotsearch"
            :key="item.id"
            @click="hot(item)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="searchdetails" v-if="searchswitch == 2">
      <div class="list">
        <h1 :class="{ active: active == 'works' }" @click="active = 'works'">
          作品
        </h1>
        <h1
          :class="{ active: active == 'creator' }"
          @click="active = 'creator'"
        >
          创作人
        </h1>
      </div>
      <div class="sort" v-if="active == 'works'">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value" :options="option" />
          <van-dropdown-item title="专业搜索" ref="item">
            <h1>
              作品分类{{ classificationtitle ? "-" + classificationtitle : "" }}
            </h1>
            <div class="navs">
              <li
                :class="{ classification: classification == '0' }"
                @click="
                  classification = 0;
                  classificationtitle = '';
                "
              >
                <span>全部</span>
              </li>
              <li
                v-for="(item, index) in hotheader"
                :key="index"
                :class="{ classification: classification == index + 1 }"
                @click="
                  classification = index + 1;
                  classificationtitle = item.title;
                  hotsearchsub = item.sub;
                "
              >
                <span>{{ item.title }}</span>
              </li>
            </div>
            <h1>
              {{ classificationtitle ? classificationtitle : ""
              }}{{
                classificationindextitle ? "-" + classificationindextitle : ""
              }}
            </h1>
            <div class="navs" v-if="classificationtitle">
              <li
                :class="{ classification: classificationindex == 0 }"
                @click="classificationindex = 0"
              >
                <span>全部</span>
              </li>
              <li
                v-for="(item, index) in hotsearchsub"
                :key="index"
                :class="{
                  classification: classificationindex == index + 1,
                }"
                @click="
                  classificationindex = index + 1;
                  classificationindextitle = item.title;
                "
              >
                <span>{{ item.title }}</span>
              </li>
            </div>
            <h1>范围{{ rangetitle ? "-" + rangetitle : "" }}</h1>
            <div class="navs">
              <li
                :class="{ classification: range == 0 }"
                @click="
                  range = 0;
                  rangetitle = '';
                "
              >
                <span>全部</span>
              </li>
              <li
                :class="{ classification: range == 1 }"
                @click="
                  range = 1;
                  rangetitle = '编辑精选';
                "
              >
                <span>编辑精选</span>
              </li>
              <li
                :class="{ classification: range == 2 }"
                @click="
                  range = 2;
                  rangetitle = '场库精选';
                "
              >
                <span>场库精选</span>
              </li>
              <li
                :class="{ classification: range == 3 }"
                @click="
                  range = 3;
                  rangetitle = '分类精选';
                "
              >
                <span>分类精选</span>
              </li>
            </div>
            <h1>时长{{ durationtitle ? "-" + durationtitle : "" }}</h1>
            <div class="navs">
              <li
                :class="{ classification: duration == 0 }"
                @click="
                  duration = 0;
                  durationtitle = '';
                "
              >
                <span>全部时长</span>
              </li>
              <li
                :class="{ classification: duration == 1 }"
                @click="
                  duration = 1;
                  durationtitle = '1分钟以下';
                "
              >
                <span>1分钟以下</span>
              </li>
              <li
                :class="{ classification: duration == 2 }"
                @click="
                  duration = 2;
                  durationtitle = '1-5分钟';
                "
              >
                <span>1-5分钟</span>
              </li>
              <li
                :class="{ classification: duration == 3 }"
                @click="
                  duration = 3;
                  durationtitle = '5-10分钟';
                "
              >
                <span>5-10分钟</span>
              </li>
              <li
                :class="{ classification: duration == 4 }"
                @click="
                  duration = 4;
                  durationtitle = '10-30分钟';
                "
              >
                <span>10-30分钟</span>
              </li>
            </div>
            <h1>清晰度{{ definitiontitle ? "-" + definitiontitle : "" }}</h1>
            <div class="navs">
              <li
                :class="{ classification: definition == 0 }"
                @click="
                  definition = 0;
                  definitiontitle = '';
                "
              >
                <span>全部清晰度</span>
              </li>
              <li
                :class="{ classification: definition == 1 }"
                @click="
                  definition = 1;
                  definitiontitle = '2k';
                "
              >
                <span>2k</span>
              </li>
              <li
                :class="{ classification: definition == 2 }"
                @click="
                  definition = 2;
                  definitiontitle = '4k';
                "
              >
                <span>4k</span>
              </li>
            </div>
            <h1>比例{{ proportiontitle ? "-" + proportiontitle : "" }}</h1>
            <div class="navs">
              <li
                :class="{ classification: proportion == 0 }"
                @click="
                  proportion = 0;
                  proportiontitle = '';
                "
              >
                <span>全部比例</span>
              </li>
              <li
                :class="{ classification: proportion == 1 }"
                @click="
                  proportion = 1;
                  proportiontitle = '横屏';
                "
              >
                <span>横屏</span>
              </li>
              <li
                :class="{ classification: proportion == 2 }"
                @click="
                  proportion = 2;
                  proportiontitle = '竖屏';
                "
              >
                <span>竖屏</span>
              </li>
            </div>
            <div class="bottom">
              <div
                class="left"
                @click="
                  classification = 0;
                  classificationtitle = '';
                  classificationindex = 0;
                  classificationindextitle = '';
                  range = 0;
                  rangetitle = '';
                  duration = 0;
                  durationtitle = '';
                  definition = 0;
                  definitiontitle = '';
                  proportion = 0;
                  proportiontitle = '';
                "
              >
                重置
              </div>
              <div class="right">确定</div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
        <DiscoveryDetails :SearchValue="SearchValue" :discoverydetails="discoverydetails"/>
        <!-- <ButTon /> -->
      </div>
    </div>
    <div class="creatorlist" v-if="active == 'creator'&&searchswitch == 2">
      <CreatorList :SearchValue="SearchValue" />
    </div>
  </div>
</template>

<script>
import DiscoveryDetails from "../components/DiscoveryDetails.vue";
// import ButTon from "../components/ViewDiscovery/ButTon.vue";
import CreatorList from "../components/CreatorList.vue";
export default {
  components: { DiscoveryDetails,  CreatorList },
  data: function () {
    return {
      SearchValue: "",
      hotsearch: [],
      hotsearchsub: [],
      active: "works",
      searchswitch: 1,
      search: JSON.parse(localStorage.getItem("hualihushao")) || [],
      value: 0,
      option: [
        { text: "最热门", value: 0 },
        { text: "最匹配", value: 1 },
        { text: "新发布", value: 2 },
      ],
      checked: true,
      hotheader: [],
      classification: 0,
      classificationtitle: "",
      classificationindex: 0,
      classificationindextitle: "",
      range: 0,
      rangetitle: "",
      duration: 0,
      durationtitle: "",
      definition: 0,
      definitiontitle: "",
      proportion: 0,
      proportiontitle: "",
      discoverydetails: [],
    };
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/xpc/search/recommend_kws")
      .then((res) => {
        // console.log(res.data);
        this.hotsearch = res.data.data.list;
      });
    this.axios.get("https://apis.netstart.cn/xpc/home/cateHot").then((res) => {
      this.hotheader = res.data.data.header.categories;
    });
  },
  watch: {
    SearchValue: function () {
      this.axios
        .get(
          "https://apis.netstart.cn/xpc/search?type=article&kw=" +
            this.SearchValue
        )
        .then((res) => {
          this.discoverydetails = res.data.data;
        });
    },
  },
  methods: {
    blur: function () {
      if (this.SearchValue == "") {
        return;
      }
      for (let i = 0; i < this.search.length; i++) {
        if (this.search[i] == this.SearchValue) {
          return;
        }
      }
      this.search.unshift(this.SearchValue);
      localStorage.setItem(
        "hualihushao",
        JSON.stringify(this.search.filter((item, index) => index < 5))
      );
      this.search = JSON.parse(localStorage.getItem("hualihushao"));
    },
    empty: function () {
      this.search = [];
      localStorage.setItem("hualihushao", JSON.stringify(this.search));
    },
    hot: function (item) {
      this.SearchValue = item.name;
      this.searchswitch = 2;
      this.active="works"
      this.blur();
    },
  },
};
</script>

<style lang="less" scoped>
.viewdiscovery {
  background-color: white;
  .Inputbox {
    position: relative;
    height: 50px;
    width: 100vw;
    background-color: white;
    border-bottom: 1px solid #dfd9d9bd;
    input {
      background-color: #dfd7d7c5;
      border: none;
      height: 30px;
      width: 78vw;
      margin: 10px 18px;
      padding-left: 40px;
      border-radius: 5px;
      caret-color: red;
      line-height: 30px;
      font-size: 14px;
    }
    i {
      position: absolute;
      top: 15px;
      left: 36px;
      font-size: 18px;
      font-weight: bold;
    }
    span {
      font-weight: bold;
    }
  }
  .historicalsearch {
    margin: 20px;
    .top {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
      h1 {
        font-weight: bold;
        margin: 0;
      }
      i {
        font-size: 18px;
        color: black;
      }
    }
    .main {
      display: flex;
      flex-wrap: wrap;
      .card {
        flex-shrink: 0;
        list-style: none;
        background-color: #dfd9d9c0;
        height: 30px;
        border-radius: 5px;
        margin: 10px 5px;
        span {
          margin: 0 13px;
          line-height: 30px;
          font-size: 14px;
        }
      }
    }
    .bottom {
      margin: 10px 0;
      h1 {
        font-weight: bold;
      }
    }
  }
  .searchdetails {
    .list {
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #d0d0d0;
      padding: 20px 0 5px 0;
      h1 {
        padding-bottom: 10px;
      }
      .active {
        font-weight: bold;
        border-bottom: 4px solid red;
      }
    }
  }
  .sort {
    /deep/.van-dropdown-menu {
      border-bottom: 1px solid #d0d0d0;
    }
    /deep/.van-dropdown-menu__bar {
      width: 46%;
      background-color: white;
    }
    /deep/.van-dropdown-item__content {
      max-height: 70%;
      padding-bottom: 60px;
    }
    h1 {
      font-size: 12px;
      margin: 20px 0 0 20px;
    }
    .navs {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 10px;
      li {
        flex-shrink: 0;
        list-style: none;
        background-color: #d0d0d0;
        width: 20%;
        height: 30px;
        border-radius: 5px;
        margin: 10px 0 0 15px;
        text-align: center;
        span {
          line-height: 30px;
          font-size: 12px;
        }
      }
      .classification {
        background-color: #ffb5b5;
        color: red;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      position: fixed;
      bottom: 22%;
      left: 0;
      right: 0;
      height: 40px;
      .left {
        width: 50%;
        background-color: white;
        border: 1px solid #d0d0d0;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
      }
      .right {
        width: 50%;
        background-color: red;
        line-height: 40px;
        text-align: center;
        font-weight: bold;
        color: white;
      }
    }
  }
}
</style>